<template>
    <div class="box-wrap">
        <!-- 牌子数量 -->
        <div class="box" v-for="(item,index) in numInfoList" :key="index">
            <!-- 循环20个数字（前后各留10个做无缝轮播） -->
            <div class="box-inner" :class="{'transition': transition}" :style="{'transform':`translateY(${item.scrollTop}px)`}">
                <div v-for="n in 30" :key="n" class="item">{{ (n-1).toString().split('').pop() }}</div>
            </div>
        </div>
    </div>
</template>

<script>
//数字翻牌器
export default{
    data(){
        return {
            numInfoList: [],//数字数组，一个元素包含数值和css样式值
            transition: true,//是否有过渡效果
        }
    },
    props: {
        value: {
            type: Number,
            default: 0
        },
        //最小长度
        minLength: {
            type: Number,
            default: 4
        }
    },
    created(){
        //初始化数据
        this.initData()
        //转换数据,更新样式
        this.updateDataAndStyle(this.value, 0)
    },
    watch: {
        value(newVal, oldVal){
            //转换数据
            this.updateDataAndStyle(newVal, oldVal)
        }
    },
    methods: {
        //初始化数据
        initData(){
            this.numInfoList = []
            //如果设置了最小长度
            if(this.minLength > 0){
                for(var i=0;i<this.minLength;i++){
                    this.numInfoList.push({
                        value: 10,//默认在中间
                        //scrollTop: -this.$utils.getAdaptionWidth(10 * 84),
                        scrollTop: -840
                    })
                }
            }
        },
        //转换数据
        async updateDataAndStyle(value, oldVal){
            //如果数值增加，则往上滚，数值减少，则往下滚
            const direction = value >= oldVal? 'up':'down'
            //转数组
            var valueList =  value.toString().split('')
            //补足
            var needLength = this.minLength - valueList.length
            for(var i=0;i<needLength;i++){
                valueList.unshift(0)
            }
            //新旧数字进行比对,在重新计算css样式
            for(var i=0;i<this.minLength;i++){
                //下标从后面开始算
                var index = this.minLength - i - 1
                //当前数字对象
                var nowNumInfo = this.numInfoList[index]
                //旧值
                var oldNum = nowNumInfo.value - 10
                //新值
                var newNum = Number(valueList[index])
                //如果总体值向上滚动
                if(direction == "up"){
                    //无需越位 1 -> 2
                    if(newNum >= oldNum){
                        //差异
                        var difference = newNum - oldNum
                    }else{
                        //需要越位,例如 9 -> 0
                        //差异
                        var difference = newNum - oldNum + 10
                    }
                    nowNumInfo.value += difference
                    //相差距离
                    //var distance = -this.$utils.getAdaptionWidth(difference * 84)
                    var distance = -difference * 84
                    //更新css样式
                    nowNumInfo.scrollTop += distance
                }else{
                    //总体向下
                    //无需越位 5 -> 4
                    if(newNum <= oldNum){
                        //差异
                        var difference = newNum - oldNum
                    }else{
                        //需要越位,例如 0 -> 9
                        //差异
                        var difference = newNum - oldNum - 10
                    }
                    nowNumInfo.value += difference
                    //相差距离
                    //var distance = -this.$utils.getAdaptionWidth(difference * 84)
                    var distance = -difference * 84
                    //更新css样式
                    nowNumInfo.scrollTop += distance
                }
            }
            //console.log(this.numInfoList[0].value, this.numInfoList[1].value, this.numInfoList[2].value, this.numInfoList[2].value)
            //console.log(this.numInfoList[0].scrollTop, this.numInfoList[1].scrollTop, this.numInfoList[2].scrollTop, this.numInfoList[2].scrollTop)
            //等待vue渲染(包含动画时间)
            await this.waitVueRender(500)
            //对越位元素进行归位
            this.styleHoming()
        },
        //对越位元素进行归位
        async styleHoming(){
            //关闭过渡效果
            this.transition = false
            //等待vue渲染
            await this.waitVueRender(50)
            for(var i=0;i<this.minLength;i++){
                //下标从后面开始算
                var index = this.minLength - i - 1
                //当前数字对象
                var nowNumInfo = this.numInfoList[index]
                //一级越位的进行恢复
                if(nowNumInfo.value >= 20){
                    nowNumInfo.value -= 10
                    //nowNumInfo.scrollTop = -this.$utils.getAdaptionWidth(nowNumInfo.value * 84)
                    nowNumInfo.scrollTop = -nowNumInfo.value * 84
                }else if(nowNumInfo.value < 10){
                    nowNumInfo.value += 10
                    //nowNumInfo.scrollTop = -this.$utils.getAdaptionWidth(nowNumInfo.value * 84)
                    nowNumInfo.scrollTop = -nowNumInfo.value * 84
                }
            }
            //等待vue渲染
            await this.waitVueRender(50)
            //恢复过渡效果
            this.transition = true
            //等待vue渲染
            await this.waitVueRender(50)
        },
        //等待vue渲染
        waitVueRender(transitionTime = 500){
            //创建promise并返回
            return new Promise((resolve,reject)=>{
                // 动画包含500毫秒的延迟
                setTimeout(()=>{
                    this.$nextTick(resolve)
                }, transitionTime)
            })
        }
    }
}
</script>

<style scoped lang="scss">
.box-wrap{
    display: flex;align-items: center;justify-content: center;
    .box{
        overflow: hidden;
        height: 84px;
        .box-inner{
            .item{
                // 高度，一旦更改，js也要改
                height: 84px;
                line-height: 84px;
                //字体样式自行修改
                font-size: 56px;
                font-weight: bold;
                padding: 0 6px;
            }
        }
        .transition{
            transition: 0.5s transform;
        }
    }
}

</style>